-->
Home
codding
COMPUTER

CSS3 Animation Text filling with color PURE CSS Tutorial

0 minute read

 CSS3 Animation Text filling with color PURE CSS Tutorial 

codes are given below ▼▼▼▼▼▼▼▼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>color</title>
    <style>

body,h1{MARGIN:0;
PADDING:0;
font-family: ARIAL;
background-color:black;}

.text-container H1 {
    font-size: 300PX;
    color: rgba(225, 225, 225, .1);
    background-image: url(color5.jpg);
    background-repeat: repeat-x;
    -webkit-background-clip:text;
    animation: animate 15s linear infinite;
}

@keyframes animate{
    0%{background-position:left 0px top 10px;}
    40%{background-position:left 800px top 10px;}

}
.text-container{
    margin-top: 14%;
    text-align: center;

}
    </style>
</head>
<body>
  <div class="text-container">
      <H1>CODf80</H1>
      </div>  
</body>
</html>

here is the video:-

Post a Comment